<template>
  <div>
    <div :style="{height: toolbarHei +'px'}"></div>
    <nut-navbar title="拜访详情" left-text="返回" left-show @click-back="clickLeft"></nut-navbar>

    <div style="padding:10px;font-size: 15px;">
      <div>拜访日期：{{bfData.arrived}}</div>
      <div>终端：{{bfData.buName}}</div>
      <div>地址：{{bfData.address}}</div>
      <div></div>
      <div>拜访内容：{{bfData.bfContent}}</div>
    </div>
    <div style="display:flex;margin-top:30px;">
      <div class="pic" v-for="(pic,index) in picList" :key="index">
        <nut-image :src="pic.url" :width="imgwid" :height="imgwid"  @click="clickPic"></nut-image>
      </div>
    </div>
    <nut-image-preview :show="showPreview" :images="picList" @close="hideFn" />

  </div>
</template>


<script>
import {useGlobal} from "@/stores/useGlobal";
import tool from "@/utils/tool";
const global = useGlobal()
export default {
  data () {
    return {
      imgwid: 90,
      showPreview : false,
      picList: [],
      imgData: [],
      bfData: {}
    }
  },
  activated() {
    this.getList(this.$route.query.id)
  },
  computed: {
    hei () {
      return window.innerHeight - 165
    },
    toolbarHei () {
      return global.statusBarHeight
    }
  },
  methods: {
    clickLeft() {
      this.$router.go(-1)
    },
    clickPic () {
      if(this.picList.length > 0) {
        for (let i = 0; i < this.picList.length; i++) {
          this.imgData.push({src: this.picList[i].url})
        }
        this.showPreview = true
      }
    },
    hideFn () {
      this.showPreview = false
    },
    async getList (id) {
      this.picList = []
      this.imgData = []
      this.bfData = {}
      await tool.post('app/bfDetail', {id: id}).then(async ret => {
        if(ret.stat) {
          this.bfData = ret.data.bf
          if(ret.data.pics.length > 0) {
            for (let i = 0; i < ret.data.pics.length; i++) {
              let rets = await tool.getPicUrl(ret.data.pics[i].fileName)
              this.picList.push({
                url: rets.urlZoom,
                src: rets.url
              })
            }
          }
        }
      })
    }
  }
}
</script>


<style scoped lang="scss">
.pic {
  margin-left: 5px;
  margin-top: 5px;
  border: 1px solid rgba(0,0,0,0.1);
  width: 110px;
  height: 110px;
  padding: 5px;
  border-radius: 4px;
  position: relative;
  .close {
    position:absolute;
    right:1px;top:1px;
  }
}
</style>